<template>
  <view>
    <!-- 搜索框模块 -->
    <MySearch />
    <!-- 轮播图模块 -->
    <!-- 组件在 小程序官网，uni-app官网，uviewUI官网 三个地方都有，任意选择一个都可以出来 -->
    <!-- <u-swiper
      :list="list1"
    ></u-swiper> -->
    <swiper class="swiper" circular :indicator-dots="true">
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <navigator :open-type="item.open_type" :url="item.navigator_url">
          <image :src="item.image_src" mode="aspectFill" />
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 入口导航模块 -->
    <view class="nav-list">
      <view v-for="(item, index) in navList" :key="index">
        <navigator v-if="item.navigator_url" :url="item.navigator_url" :open-type="item.open_type">
          <image :src="item.image_src"></image>
        </navigator>
        <image v-else :src="item.image_src"></image>
      </view>
      
    </view>

    <!-- 楼层模块 -->
     <view class="m-floor">
      <view class="floor" v-for="(item, index) in floorList" :key="index">
        <view class="floor-title">
          <image
            :src="item.floor_title.image_src"
            mode="widthFix"
          />
        </view>
        <view class="product-list">
          <navigator :url="item.product_list[0].navigator_url" :open-type="item.product_list[0].open_type" hover-class="none">
            <image
              :src="item.product_list[0].image_src"
              mode="heightFix"
            />
          </navigator>
          <navigator v-for="(childItem, childIndex) in item.product_list.slice(1)" :key="childIndex" :url="childItem.navigator_url" :open-type="childItem.open_type" hover-class="none">
            <image
              :src="childItem.image_src"
              mode="heightFix"
            />
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import MySearch from '../../components/MySearch/MySearch.vue'
export default {
  // components: { MySearch },
  data() {
    return {
      // 轮播图列表
      swiperList: [],
      // 入口导航列表
      navList: [],
      // 楼层列表
      floorList: []
    };
  },
  // 写页面的时候，用小程序的生命周期函数，不要用vue的created。 这是uni-app的规范
  onLoad() {
    this.getSwiperList()
    this.getNavList()
    this.getFloorList()
  },
  methods: {
    async getSwiperList() {
      // 对象数组的高级解构
      // const [err, {data: {message: res}}] = await uni.request({
      //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      //   method: 'GET'
      // })
      // console.log(res);
      // this.setData() // 小程序语法
      const res = await uni.$u.http.get('/home/swiperdata')
      console.log(res);
      this.swiperList = res.data.message
    },
    async getNavList() {
      const res = await uni.$u.http.get('/home/catitems')
      console.log(res);
      this.navList = res.data.message
    },
    async getFloorList() {
      const res = await uni.$u.http.get('/home/floordata')
      this.floorList = res.data.message
    }
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  navigator {
    width: 750rpx; 
    height: 150px;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
  // 所有的view盒子默认的宽高都是有image的默认大小 320*240撑开的
  // image这里就不能写100%。 使用rpx代替响应式单位
  image {
    width: 140rpx;
    height: 140rpx;
  }
}

.floor-title {
    image {
      width: 750rpx;
    }
  }
  .product-list {
    navigator {
      float: left;
      margin-left: 12rpx;
      margin-bottom: 10rpx;
      image {
        height: 188rpx;
      }
      &:nth-child(1) {
        image {
          height: 386rpx;
        }
      }
    }
  }
</style>